<%--
  Created by IntelliJ IDEA.
  User: tianyu
  Date: 2023/7/2
  Time: 20:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>商品管理页面</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <link rel="stylesheet" href="./css/fileinput.min.css">

        <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <!-- jsp= html + servlet -->

        <script src="./js/fileinput.min.js"></script>

        <style>
            th,td{ text-align: center}
            /*   表格颜色样式     */
            .table-hover tbody tr:not(:hover) {
                background-color: #ffc0cb; /* 修改为您想要的颜色值 */
            }
            th{ background-color: white;}


            /*   表格颜色样式   结束   */
        </style>
</head>
<body class="bg-success" style="background-image: url('./images/R-C.jpg')">

<!-- 导航  开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">xxxx商品后台管理</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown">
                            <a href="login.html" class="dropdown-toggle" >
                                首页
                                <b class="caret"></b>
                            </a>

                        </li>
                        <li class="dropdown">
                            <a href="user.jsp" class="dropdown-toggle" >用户管理</a>
                        </li>
                        <!--
                        <li class="active">
                            <a href="login.html">商品管理</a>
                        </li>
                        -->

                        <li class="dropdown">
                            <a href="goods.jsp" class="dropdown-toggle" >商品管理</a>
                        </li>

                        <li class="dropdown">
                            <a href="orders.jsp" class="dropdown-toggle" >订单管理</a><%--data-toggle="dropdown"--%>
                        </li>
                    </ul>
                    <!--向右对齐 -->
                    <ul class="nav navbar-nav navbar-right">
                        <%--显示登录用户--%>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle">
                        <li class="dropdown"><%=session.getAttribute("goodsname")%></li>
                        </a>
                        </li>
                        <li class="dropdown">
                            <a href="/Test/logout" class="dropdown-toggle">
                                退出 <b class="caret"></b>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="col-md-1"></div>
</div>
<!-- 导航  结束 -->

<!--搜索框和添加按钮部分 开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon">商品名：</span>
                    <input type="text" class="form-control" placeholder="请输入搜索的商品" id="searchname">
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-default" onclick="userList(1,5)">搜索</button>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
<!--搜索框和添加按钮部分 结束 -->
<br>

<!--表格部分  开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10  center-block">
        <table class="table table-striped table-bordered table-hover">
            <!-- <caption>基本的表格布局</caption> -->
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名</th>
                <th>商品价格</th>
                <th>商品类型</th>
                <th>商品图片</th>
                <th>更新时间</th>
                <th>商品操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            <%--<tr><td>1</td><td>苹果</td><td>14元/Kg</td><td>水果</td><td><button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button><button onclick="del(0)" type="button" class="btn btn-danger btn-xs">删除</button></td></tr>
            <tr><td>2</td><td>土豆</td><td>1.2元/Kg</td><td>蔬菜</td><td><button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button><button onclick="del(0)" type="button" class="btn btn-danger btn-xs">删除</button></td></tr>
            <tr><td>3</td><td>乒乓球</td><td>2元/个</td><td>体育器材</td><td><button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button><button onclick="del(0)" type="button" class="btn btn-danger btn-xs">删除</button></td></tr>
            <tr><td>4</td><td>足球</td><td>60元/个</td><td>体育器材</td><td><button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button><button onclick="del(0)" type="button" class="btn btn-danger btn-xs">删除</button></td></tr>
            <tr><td>5</td><td>感冒口服液</td><td>25元/件</td><td>医疗保健品</td><td><button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button><button onclick="del(0)" type="button" class="btn btn-danger btn-xs">删除</button></td></tr>
            <tr><td>6</td><td>云南白药</td><td>20元/件</td><td>医疗保健品</td><td><button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button><button onclick="del(0)" type="button" class="btn btn-danger btn-xs">删除</button></td></tr>--%>

            </tbody>
        </table>
        <!-- 分页开始-->
        <ul class="pagination" style="margin-left: 35%" id="fy">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">»</a></li>
        </ul>
        <!-- 分页结束-->

    </div>
    <div class="col-md-1"></div>
</div>
<!--表格部分  结束 -->

<!--添加的模态框 开始 -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 30%; display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加商品</h4>
            </div>
            <div class="modal-body">
               <%-- <div class="form-group">
                    <label for="goodsnum">商品编号</label>
                    <input type="text" class="form-control" id="goodsnum" placeholder="请输入商品编号">
                </div>--%>
                <div class="form-group">
                    <label for="goodsname">商品名</label>
                    <input type="text" class="form-control" id="goodsname" placeholder="请输入商品名">
                </div>
                <div class="form-group">
                    <label for="goodsprice">商品价格</label>
                    <input type="text" class="form-control" id="goodsprice" placeholder="请输入商品价格">
                </div>
                <div class="form-group">
                    <label for="goodstype">商品类型</label>
                    <input type="text" class="form-control" id="goodstype" placeholder="请输入商品类型">
                </div>
                   <div class="form-group">
                       <label for="avatar">商品图片</label>
                       <input type="file" class="form-control uploadImg" >
                       <input type="hidden" id="avatar" placeholder="请输入商品图片">
                   </div>
                   <div class="form-group">
                       <label for="createdate">更新时间</label>
                       <input type="date" class="form-control" id="createdate" placeholder="请输入更新时间">
                   </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addUser()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--添加的模态框 结束 -->

<!--修改的模态框 开始 -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 30%; display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel2">编辑商品</h4>
            </div>
            <div class="modal-body">
                <%--<div class="form-group">
                    <label for="goodsnum">商品编号</label>--%>
                    <input type="hidden" class="form-control" id="goodsnum2" placeholder="请输入商品编号">
                <%--</div>--%>
                <div class="form-group">
                    <label for="goodsname">商品名</label>
                    <input type="text" class="form-control" id="goodsname2" placeholder="请输入商品名">
                </div>
                <div class="form-group">
                    <label for="goodsprice2">商品价格</label>
                    <input type="text" class="form-control" id="goodsprice2" placeholder="请输入商品价格">
                </div>
                <div class="form-group">
                    <label for="goodstype">商品类型</label>
                    <input type="text" class="form-control" id="goodstype2" placeholder="请输入商品类型">
                </div>
                    <div class="form-group">
                        <label for="avatar">商品图片</label>
                        <input type="file" class="form-control uploadImg" >
                        <input type="hidden" id="avatar2" placeholder="请输入商品图片">
                    </div>
                    <div class="form-group">
                        <label for="createdate">更新时间</label>
                        <input type="date" class="form-control" id="createdate2" placeholder="请输入更新时间">
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateUser()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--修改的模态框 结束 -->
</body>
<script src="./js/upload.js"></script>

<script>
    //列表渲染
    var pageIndex=1;//第几页
    var pageSize=5;//每页几条
    userList(pageIndex,pageSize);
    function  userList(pageIndex,pageSize)
    {

        //获取搜索框的内容
        var searchname=$("#searchname").val();

        var obj={}//定义一个对象
        //获取搜索的名称

        //组装数组
        obj.search=null;
        obj.pageIndex=pageIndex;
        obj.pageSize=pageSize;

        $.ajax
        (
            {
                url:"/Test/getGoodss",//请求路径
                //data:JSON.stringify(obj),//请求数据
                data:{
                    searchname:searchname,
                    pageIndex:pageIndex,
                    pageSize: pageSize
                },
                type:"GET",//请求方式
               /* dataType:"json",//请求数据类型
                contentType:"application/json",//返回数据类型*/
                success:function (data)
                {
                    console.log(data);
                    data=JSON.parse(data);
                    /*//数据本地存储
                    var users=localStorage.getItem("userList");//获取本地存储的数据
                    if(users)
                    {
                        //有数据则为 true
                        users=JSON.parse(users);//把json格式字符串转为json数据
                        data.data=users;
                        localStorage.setItem("userList",JSON.stringify(users));//数据本地存储
                    }
                    else
                    {
                        localStorage.setItem("userList",JSON.stringify(data.data));//数据本地存储
                    }*/


                   //渲染表格
                    var html="";
                    var count= data.count;//总条数
                    data=data.data;
                    data.forEach((e,i)=>{
                        html+='<tr>'+
                            '<td>'+e.goodsnum+'</td>'+
                            '<td>'+e.goodsname+'</td>'+
                            '<td>'+e.goodsprice+'</td>'+'<td>'+e.goodstype+'</td>'+
                            '<td><img src="'+e.avatar+'" width="80"></td>'+
                            '<td>'+e.createdate+'</td>'+
                            '<td>'+'<button onclick="getUser('+e.goodsnum+')" type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button>'+
                            '<button onclick="del('+e.goodsnum+')" type="button" class="btn btn-danger btn-xs">删除</button>'
                            +'</td>'+
                            '</tr>'
                    })
                    $("#tb").html(html);

                    //渲染分页
                    var fyhtml='<li><a onclick="userList('+(pageIndex-1>0?pageIndex-1:1)+','+pageSize+')" href="#">&laquo;</a></li>';
                    //调用Math.ceil()向上取整  2.1=3  2.5=3
                    var page= Math.ceil(count/pageSize);
                    for(var i=1;i<=page;i++){
                        fyhtml +=' <li><a onclick="userList('+i+','+pageSize+')" href="#">'+i+'</a></li>';
                    }
                    fyhtml += ' <li><a onclick="userList('+(pageIndex+1>=page?page:(pageIndex+1))+','+pageSize+')" href="#">&raquo;</a></li>';
                    $("#fy").html(fyhtml);

                }
            }
        )
    }

    //添加用户
    function addUser()
    {
        // 获取输入框的值
        var goodsnum=$("#goodsnum").val();
        var goodsname=$("#goodsname").val();
        var goodsprice=$("#goodsprice").val();
        var goodstype=$("#goodstype").val();
        var avatar = $("#avatar").val();
        var createdate = $("#createdate").val();


        // 判断不能为空
       /* if(!goodsnum)
        {
            alert("商品编号不能为空！")
            return;
        }*/
        if(!goodsname)
        {
            alert("商品名不能为空！")
            return;
        }
        if(!goodsprice)
        {
            alert("商品价格不能为空！")
            return;
        }
        if(!goodstype)
        {
            alert("商品类型不能为空！")
            return;
        }
        if (!avatar) {
            alert("商品图片不能为空！")
            return;
        }
        if (!createdate) {
            alert("更新时间不能为空！")
            return;
        }

        //组装数据
        var obj={}
        //obj.goodsnum=goodsnum;
        obj.goodsname=goodsname;
        obj.goodsprice=goodsprice;
        obj.goodstype=goodstype;
        /*var users=localStorage.getItem("userList");//获取本地存储的数据
        users=JSON.parse(users);
        users.push(obj);//数据添加到数组里面
        localStorage.setItem("userList",JSON.stringify(users));//数组的
        userList(1,5);
        $("#myModal").modal("hide");*/

        //表单的形式进行数据发送
        $.ajax
        (
            {
                url: "/Test/addGoods",//请求路径
                data: {goodsname: goodsname, goodsprice: goodsprice,goodstype:goodstype, avatar: avatar,createdate:createdate},//请求数据
                type: "POST",//请求方式
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {

                        userList(1, 5);//刷新列表
                        $("#myModal").modal("hide");//模态框隐藏
                    } else {
                        alert("添加失败！");
                    }
                }
            }
        )
    }

    //删除用户
    function del(ID)
    {
        /*var users=localStorage.getItem("userList");
        users=JSON.parse(users);
        users.splice(ID,1);//数组替换
        localStorage.setItem("userList",JSON.stringify(users));
        userList(1,5);*/
        $.ajax
        (
            {
                url: "/Test/deleteGoods",//请求路径
                data: {goodsnum:ID},//请求数据
                type: "POST",//请求方式
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {
                        alert("删除成功！");
                        userList(1, 5);//刷新列表
                        $("#myModal").modal("hide");//模态框隐藏
                    } else {
                        alert("删除失败！");
                    }
                }
            }
        )
    }
    //修改名称怎么实现
    //每个小组设置相关项目表格，至少三个，每表格的字段至少五个以上
    //在此模板下，实现列表渲染，数据添加，数据删除，三个功能（9个以上）
    //

    //定义全局变量
    var index=0;//定义全局变量，保持下标

    function getUser(ID)
    {
        /*var users=localStorage.getItem("userList");//获取本地存储的数据
        users=JSON.parse(users);//把json格式字符串转成son数据
        $("#goodsnum2").val(users[ID].goodsnum);
        $("#goodsname2").val(users[ID].goodsname);
        $("#goodsprice2").val(users[ID].goodsprice);
        $("#goodstype2").val(users[ID].goodstype);*/

        //index=ID;

        $.ajax
        (
            {
                url: "/Test/getGoodsById",//请求路径
                data: {goodsnum:ID},//请求数据
                type: "GET",//请求方式 GET/POST/ PUT/DELETE
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {

                        $("#goodsnum2").val(data.data.goodsnum);
                        $("#goodsname2").val(data.data.goodsname);
                        $("#goodsprice2").val(data.data.goodsprice);
                        $("#goodstype2").val(data.data.goodstype);
                        $("#avatar2").val(data.data.avatar);
                        $("#createdate2").val(data.data.createdate);

                        //图片渲染
                        $(".file-drop-zone-title").html('<img src="'+data.data.avatar+'" width="260">')

                    } else {
                        alert("查询失败！");
                    }
                }
            }
        )

    }


    //修改商品
    function updateUser() {
        //获取修改之后的信息
        var goodsnum = $("#goodsnum2").val();
        var goodsname = $("#goodsname2").val();
        var goodsprice = $("#goodsprice2").val();
        var goodstype = $("#goodstype2").val();
        var avatar = $("#avatar2").val();
        var createdate = $("#createdate2").val();

        //组装数据
        var obj = {};
        obj.goodsnum = goodsnum;
        obj.goodsname = goodsname;
        obj.goodsprice = goodsprice;
        obj.goodstype = goodstype;

        /*//进行数据替换
        var users = localStorage.getItem("userList");//获取本地存储的数据
        users = JSON.parse(users);
        users.splice(index, 1, obj);//数据添加到数组里面
        localStorage.setItem("userList", JSON.stringify(users));//数据本地存储
        userList(1, 5);//刷新列表
        $("#myModal2").modal("hide");*/

        $.ajax
        (
            {
                url: "/Test/updateGoods",//请求路径
                data: {goodsnum:goodsnum,goodsname:goodsname,goodsprice:goodsprice,goodstype:goodstype,avatar:avatar,createdate:createdate},//请求数据
                type: "post",//请求方式 GET/POST/ PUT/DELETE
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {

                        userList(1, 5);//刷新列表
                        $("#myModal2").modal("hide");//模态框隐藏

                    } else {
                        alert("修改失败！");
                    }
                }
            }
        )
    }


</script>



</body>
</html>
